<template>
    <el-container>
        <el-aside width="200px">
            <div class="knowledge-aside">
                <div class="knowledge-title">知识点列表</div>
                <ul class="knowledge-list">
                    <li class="list-item active">&nbsp;&nbsp;python简介</li>
                    <li class="list-item">&nbsp;&nbsp;python语言基础知识</li>
                    <li class="list-item">&nbsp;&nbsp;python语言的特点</li>
                    <li class="list-item">&nbsp;&nbsp;人们都用python做什么</li>
                    <li class="list-item">&nbsp;&nbsp;如何学好python</li>
                </ul>
            </div>
        </el-aside>
        <el-main>
            <div class="content">
                <div class="content-title">python编程基础教程</div>
                <p class="content-desc">
                    本教程介绍python编程基础的相关知识点，跟传统的教程不同，本教程通过“晓白”学习python的故事为主线情节，来展开介绍python学习的相关知识点。每个知识点学习和应用目标明确，配有丰富的图文以及案例讲解，对于某些实操部分，还提供了演示视频。并且知识点后均配有相关练习，让大家可以测试自己是否真的学会了该知识点。
                </p>
                <div class="label">知识点数量：50</div>
                <div class="label">关键字标签：编程 python 基础</div>
                <div class="label">相关语言：python</div>
                <div class="content-img">
                    <div class="img-item">
                        <img
                            src="../../assets/img/wikiKnowledge/最热python.png"
                            alt=""
                        />
                    </div>
                    <div class="img-item">
                        <img
                            src="../../assets/img/wikiKnowledge/代码.png"
                            alt=""
                        />
                    </div>
                    <div class="img-item">
                        <img
                            src="../../assets/img/wikiKnowledge/思维导图.png"
                            alt=""
                        />
                    </div>
                </div>
                <div class="relatedVedio">&nbsp;&nbsp;相关视频：</div>
                <div class="vedio-list">
                    <div class="vedio-item">
                        <div class="vedio-img">
                            <img
                                src="../../assets/img/wikiKnowledge/video.png"
                                alt=""
                            />
                        </div>
                        <div class="vedio-content">
                            <div class="vedio-title">
                                1. <a href="#">视频标题名称</a>
                            </div>
                            <div class="vedio-msg">
                                <div class="vedio-time">时长：41分钟32秒</div>
                                <div class="vedio-icon">|</div>
                                <div class="vedio-plays">播放：255次</div>
                            </div>
                        </div>
                    </div>
                    <div class="vedio-item">
                        <div class="vedio-img">
                            <img
                                src="../../assets/img/wikiKnowledge/video.png"
                                alt=""
                            />
                        </div>
                        <div class="vedio-content">
                            <div class="vedio-title">
                                1. <a href="#">视频标题名称</a>
                            </div>
                            <div class="vedio-msg">
                                <div class="vedio-time">时长：41分钟32秒</div>
                                <div class="vedio-icon">|</div>
                                <div class="vedio-plays">播放：255次</div>
                            </div>
                        </div>
                    </div>
                    <div class="vedio-item">
                        <div class="vedio-img">
                            <img
                                src="../../assets/img/wikiKnowledge/video.png"
                                alt=""
                            />
                        </div>
                        <div class="vedio-content">
                            <div class="vedio-title">
                                1. <a href="#">视频标题名称</a>
                            </div>
                            <div class="vedio-msg">
                                <div class="vedio-time">时长：41分钟32秒</div>
                                <div class="vedio-icon">|</div>
                                <div class="vedio-plays">播放：255次</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 相关练习 -->
            <div class="related-practice-title">&nbsp;&nbsp;相关练习：</div>
            <div class="related-practice">
                <div class="practice">
                    <div
                        class="practice-item"
                        v-for="(item, index) in practiceData"
                        :key="index"
                    >
                        <div class="itemImg">
                            <img
                                src="../../assets/img/userCenter/practice.png"
                                alt=""
                            />
                        </div>
                        <div class="itemTitle">{{ item.title }}</div>
                        <div class="itemType">{{ item.type }}</div>
                        <div class="itemNum">{{ item.num }}</div>
                        <div class="model">
                            <div class="collection">
                                <img
                                    src="../../assets/img/userCenter/collection.png"
                                    alt=""
                                />
                            </div>
                            <div class="joinBtn">
                                参与练习
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            practiceData: [
                {
                    imgUrl: "../../assets/img/userCenter/practice.png",
                    title: "Python基础一阶段基础练习",
                    type: "练习类型：在线测评",
                    num: "参与人数：122",
                },
                {
                    imgUrl: "../../assets/img/userCenter/practice.png",
                    title: "Python基础一阶段基础练习",
                    type: "练习类型：在线测评",
                    num: "参与人数：122",
                },
                {
                    imgUrl: "../../assets/img/userCenter/practice.png",
                    title: "Python基础一阶段基础练习",
                    type: "练习类型：在线测评",
                    num: "参与人数：122",
                },
                {
                    imgUrl: "../../assets/img/userCenter/practice.png",
                    title: "Python基础一阶段基础练习",
                    type: "练习类型：在线测评",
                    num: "参与人数：122",
                },
                {
                    imgUrl: "../../assets/img/userCenter/practice.png",
                    title: "Python基础一阶段基础练习",
                    type: "练习类型：在线测评",
                    num: "参与人数：122",
                },
            ],
        };
    },
    components: {},
    created() {},
    mounted() {},
    methods: {},
};
</script>

<style lang='scss' scoped>
@import "../../assets/css/wikiKnowledge/wikiDetails.scss";
</style>